<template>
    <div class="search-list">
      <div class="headers">
        <Header></Header>
        <ul>
          <li>
            <div>综合</div>
          </li>
          <li>
            <div>销量</div>
          </li>
          <li>
            <div>新品</div>
          </li>
          <li>
            <div>价格</div>
          </li>
        </ul>
      </div>
      <section>
        <ul>
          <li v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
            <img :src="item.imgUrl" alt="" />
            <h3>{{ item.name }}</h3>
            <div class="price">
              <div>
                <span>￥</span>
                <b>{{ item.price }}</b>
              </div>
              <div>{{ item.num }}☆</div>
            </div>
          </li>
        </ul>
        <div style="margin-top: 100px;" v-if="goodsList.length === 0"><van-empty description="暂无商品" />

        </div>
      </section>
    </div>
  </template>
  
  <script setup>
  import Header from "@/components/search/Header.vue";
  import http from "@/common/api/request.js";
  import { useRoute } from "vue-router";
  let route = useRoute();
  import { ref, onMounted, watch } from "vue";
  onMounted(() => {
    getData();
  });
  let goodsList = ref([]);
  const getData = () => {
    http
      .$axios({
        url: "/api/goods/shopList",
        params: {
          searchName: route.query.key,
        },
      })
      .then((res) => {
        console.log("查询的数据", res);
        goodsList.value = res;
      });
  };
  //监听路由变化后继续请求数据
  watch(
    () => route.query.key,
    (newKey, oldKey) => {
      if (newKey !== oldKey) {
        getData();
      }
    }
  );
  import { useRouter } from "vue-router";
  const router = useRouter();
  const goDetail = (id) => {
    router.push({ path: "/detail", query: { id } });
  };
  </script>
  
  <style scoped>
  .search-list {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 150vh;
    overflow: hidden;
  }
  
  .headers ul {
    display: flex;
    justify-content: space-around;
    padding: 0.2rem 0;
    font-size: 0.426666rem;
    background-color: #fff;
  }
  
  .headers ul li {
    display: flex;
    align-items: center;
  }
  
  .headers ul li > div {
    padding: 0 0.08rem;
  }
  
  section {
    flex: 1;
    overflow: hidden;
  }
  
  section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  section ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 50%;
    padding: 0.266666rem;
  }
  
  section ul li img {
    width: 4.533333rem;
    height: 6.533333rem;
  }
  
  section ul li h3 {
    width: 100%;
    font-size: 0.373333rem;
    color: #222;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff;
  }
  
  section ul li .price {
    display: flex;
    justify-content: space-between;
    padding: 0.166666rem 0.16666rem;
    width: 100%;
    font-size: 14px;
    background-color: #fff;
  }
  
  section ul li .price div:first-child span {
    font-size: 0.32rem;
    color: black;
  }
  </style>
  